<template>
	<view class="page">
		<view class="order_status-wrap" v-if="!hideBtn">
			<image class="icon" src="../static/tobepaid-icon.png" mode=""></image>
			<text v-if="countDownStartTime">待支付，倒计时：{{countDownStartTime || ''}}</text>
			<text v-else>待支付，订单已超时</text>
		</view>
		<view class="order_status-wrap order_success" v-else>
			<view class="l-wrap">
				<image class="icon" src="../static/success-icon.png" mode=""></image>
				<text>订单已购买成功</text>
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<image @click="handleShare" class="share-icon" src="../../static/imgs/icons/share-icon.png" mode=""></image>
			<!-- #endif -->
		</view>

		<view class="bus_info-wrap">
			<view class="top-dack"></view>
			<!-- 单程班次信息S -->
			<view class="bus_info tp-w690" v-if="!toAndFor">
				<view class="info_top-wrap">
					<view class="date">发车时间：{{(busInfo && busInfo.startDay) || ''}} {{busInfo.week || ''}}</view>
				</view>
				<view class="info_content-wrap">
					<view class="from">
						<text class="time">{{busInfo.departureTime || ''}}</text>
						<text class="address">{{busInfo.startStation || ''}}</text>
					</view>
					<view class="bus_type-wrap">
						<text class="but_type">{{busInfo.shiftsCartype || ''}}</text>
						<view class="dack"></view>
						<text class="duration">历时{{busInfo.travelTime || ''}}分钟</text>
					</view>
					<view class="to">
						<text class="time">{{busInfo.arriveTime || ''}}</text>
						<text class="address">{{busInfo.arriveStation || ''}}</text>
					</view>
				</view>
			</view>
			<!-- 单程班次信息E -->

			<!-- 往程班次和乘车人信息S -->
			<view class="bus_info bus_info_from  tp-w690" v-if="toAndFor">
				<view class="info_top-wrap">
					<view class="date">发车时间：{{ (busInfoToAndFor && busInfoToAndFor.go && busInfoToAndFor.go.startDay) || ''}}
						{{busInfoToAndFor && busInfoToAndFor.go && busInfoToAndFor.go.week || ''}}</view>
				</view>
				<view class="info_content-wrap">
					<view class="from">
						<text class="time">{{(busInfoToAndFor && busInfoToAndFor.go && busInfoToAndFor.go.departureTime) || ''}}</text>
						<text class="address">{{busInfoToAndFor.go &&busInfoToAndFor.go.startStation || ''}}</text>
					</view>
					<view class="bus_type-wrap">
						<text class="but_type">{{busInfoToAndFor.go && busInfoToAndFor.go.shiftsCartype || ''}}</text>
						<view class="dack"></view>
						<text class="duration">历时{{busInfoToAndFor.go && busInfoToAndFor.go.travelTime || ''}}分钟</text>
					</view>
					<view class="to">
						<text class="time">{{busInfoToAndFor.go && busInfoToAndFor.go.arriveTime || ''}}</text>
						<text class="address">{{busInfoToAndFor.go && busInfoToAndFor.go.arriveStation || ''}}</text>
					</view>
				</view>

				<!-- 当前选择乘车人列表-from S -->
				<view class="rider_list" :style="{height: !hideBtn?(showMoreRiderFrom?`${188*(fromRiderList.length)}rpx`:'188rpx'):(showMoreRiderFrom?`${260*(fromRiderList.length)}rpx`:'260rpx')}">
					<view class="rider_item" v-for="(it_r,in_r) in fromRiderList" :key="in_r">
						<view class="info-wrap">
							<view class="l-wrap">
								<text class="name ellispsis1">{{it_r.passageName}}</text>
								<text class="type">{{it_r.passageType}}</text>
								<text class="ID">{{it_r.passageNumber}}</text>
							</view>
							<view class="price"> <text style="font-size: 24rpx;font-weight: normal;">￥</text>{{it_r.price}}</view>
						</view>
						<view class="site-wrap">
							<text v-if="it_r.seat != null" class="site">{{it_r.carNumber}} 座位：{{it_r.seat}}</text>
							<text v-else></text>
							<view class="code-img" v-if="( orderDetail.goDabaOrderSimpleVo && orderDetail.goDabaOrderSimpleVo.status == 1 ||  orderDetail.goDabaOrderSimpleVo && orderDetail.goDabaOrderSimpleVo.status == 2) && (it_r.ticketState == 0 || it_r.ticketState == 3)"
							 @click="handlPreviewCode(wwwImgUrl + it_r.qrCode)">
								<image :src="wwwImgUrl + it_r.qrCode" mode=""></image>
							</view>
							<!-- <view class="code-img" v-else>
								<image :src="it_r.qrCode" mode=""></image>
							</view> -->
						</view>
						<view class="btns-wrap" v-if="hideBtn">
							<view v-if="it_r.goTransferId != -1" class="txt" @click="handleGoPickupDetail(it_r.goTransferId)">接站服务</view>
							<view v-if="it_r.backTransferId != -1" class="txt" @click="handleGoPickupDetail(it_r.backTransferId)">送站服务</view>
							<view v-else class="txt"></view>
							<view class="btns">
								<view v-if="status == 1 && (it_r.ticketState == 0|| it_r.ticketState == 4) && it_r.isGaiQian== 1" class="btn back tp-ml30"
								 @click="handleShowCancle(it_r)">退票</view>
								<view v-if="it_r.isGaiQian == 1 && it_r.ticketState == 0 && status == 1" class="btn edit tp-ml30" @click="handleShowTip(it_r.ticketId)">改签</view>
								<!-- </view>
							<view class="btns" v-if="it_r.ticketState!=0 && [2,3,4].includes(status-0)"> -->
								<view v-if="it_r.ticketState== 2" class="btn back_reason tp-ml30" @click="handleShowBackReason(it_r.reason)">退款原因</view>
								<view v-if="it_r.isGaiQian==0" class="btn disabled tp-ml30">已改签</view>
								<view v-if="it_r.ticketState==1" class="btn disabled tp-ml30">已核销</view>
								<view v-if="it_r.ticketState==3" class="btn disabled tp-ml30">已失效</view>
								<!-- </view>
							<view class="btns" > -->
								<view v-if="it_r.ticketState==0" class="btn disabled tp-ml30">未核销</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 当前选择乘车人列表-from E -->
				<view v-if="fromRiderList.length > 1">
					<view class="more_rider" @click="handleSwithMoreRiderFrom" v-if="!showMoreRiderFrom">
						查看乘车人信息<image class="showmore-icon" src="../static/showmore-icon.png" mode="aspectFill"></image>
					</view>
					<view class="more_rider" @click="handleSwithMoreRiderFrom" v-else>
						收起乘车人信息<image class="showmore-icon" src="../static/showmore-un-icon.png" mode="aspectFill"></image>
					</view>
				</view>
			</view>
			<!-- 往程班次和乘车人信息E -->

			<!-- 备注 S -->
			<view v-if="busInfo.remark || (busInfoToAndFor.go && busInfoToAndFor.go.remark) " class="common-wrap tp-w690 flex tp-fz30"
			 style="padding: 30rpx;">
				<text class="tp-fc333">备注：</text>
				<text class="tp-fc999">{{busInfo.remark || (busInfoToAndFor.go && busInfoToAndFor.go.remark) }}</text>
			</view>
			<!-- 备注 E -->

			<!-- 返程班次和乘车人信息S -->
			<view class="bus_info bus_info_from bus_info_to  tp-w690" v-if="toAndFor">
				<view class="info_top-wrap">
					<view class="date">发车时间：{{busInfoToAndFor && busInfoToAndFor.back && busInfoToAndFor.back.startDay}}
						{{busInfoToAndFor.back && busInfoToAndFor.back.week}}</view>
				</view>
				<view class="info_content-wrap">
					<view class="from">
						<text class="time">{{busInfoToAndFor.back && busInfoToAndFor.back.departureTime}}</text>
						<text class="address">{{busInfoToAndFor.back && busInfoToAndFor.back.startStation}}</text>
					</view>
					<view class="bus_type-wrap">
						<text class="but_type">{{busInfoToAndFor.back && busInfoToAndFor.back.shiftsCartype}}</text>
						<view class="dack"></view>
						<text class="duration">历时{{busInfoToAndFor.back && busInfoToAndFor.back.travelTime}}分钟</text>
					</view>
					<view class="to">
						<text class="time">{{busInfoToAndFor.back && busInfoToAndFor.back.arriveTime}}</text>
						<text class="address">{{busInfoToAndFor.back && busInfoToAndFor.back.arriveStation}}</text>
					</view>
				</view>

				<!-- 当前选择乘车人列表-to S -->
				<view class="rider_list" :style="{height: !hideBtn?(showMoreRiderTo?`${188*toRiderList.length}rpx`:'188rpx'):(showMoreRiderTo?`${260*toRiderList.length}rpx`:'260rpx')}">
					<view class="rider_item" v-for="(it_r,in_r) in toRiderList" :key="in_r">
						<view class="info-wrap">
							<view class="l-wrap">
								<text class="name ellispsis1">{{it_r.passageName}}</text>
								<text class="type">{{it_r.passageType}}</text>
								<text class="ID">{{it_r.passageNumber}}</text>
							</view>
							<view class="price"> <text style="font-size: 24rpx;font-weight: normal;">￥</text>{{it_r.price}}</view>
						</view>
						<view class="site-wrap">
							<text v-if="it_r.seat" class="site">{{it_r.carNumber}} 座位：{{it_r.seat}}</text>
							<text v-else></text>
							<view class="code-img" v-if="( orderDetail.backDabaOrderSimpleVo && orderDetail.backDabaOrderSimpleVo.status == 1 || orderDetail.backDabaOrderSimpleVo && orderDetail.backDabaOrderSimpleVo.status == 2) && (it_r.ticketState == 0 || it_r.ticketState == 3)"
							 @click="handlPreviewCode(wwwImgUrl + it_r.qrCode)">
								<image :src="wwwImgUrl + it_r.qrCode" mode=""></image>
							</view>
							<!-- <view class="code-img" v-else>
								<image :src="it_r.qrCode" mode=""></image>
							</view> -->
						</view>
						<view class="btns-wrap" v-if="hideBtn">
							<view v-if="it_r.goTransferId != -1" class="txt" @click="handleGoPickupDetail(it_r.goTransferId)">接站服务</view>
							<view v-if="it_r.backTransferId != -1" class="txt" @click="handleGoPickupDetail(it_r.backTransferId)">送站服务</view>
							<view v-else class="txt"></view>
							<view class="btns">
								<view v-if="status == 1 && (it_r.ticketState == 0 || it_r.ticketState == 4) && it_r.isGaiQian== 1" class="btn back tp-ml30"
								 @click="handleShowCancle(it_r)">退票</view>
								<view v-if="it_r.isGaiQian == 1 && it_r.ticketState == 0 && status == 1" class="btn edit tp-ml30" @click="handleShowTip(it_r.ticketId)">改签</view>
								<!-- </view>
							<view class="btns" v-if="it_r.ticketState!=0 && [2,3,4].includes(status-0)"> -->
								<view v-if="it_r.ticketState== 2" class="btn back_reason tp-ml30" @click="handleShowBackReason(it_r.reason)">退款原因</view>
								<view v-if="it_r.isGaiQian==0" class="btn disabled tp-ml30">已改签</view>
								<view v-if="it_r.ticketState==1" class="btn disabled tp-ml30">已核销</view>
								<view v-if="it_r.ticketState==3" class="btn disabled tp-ml30">已失效</view>
								<!-- 	</view>
							<view class="btns" v-if="it_r.ticketState==0 && status!=1"> -->
								<view v-if="it_r.ticketState==0" class="btn disabled tp-ml30">未核销</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 当前选择乘车人列表-to E -->
				<view v-if="toRiderList.length > 1">
					<view class="more_rider" @click="handleSwithMoreRiderTo" v-if="!showMoreRiderTo">
						查看乘车人信息<image class="showmore-icon" src="../static/showmore-icon.png" mode="aspectFill"></image>
					</view>
					<view class="more_rider" @click="handleSwithMoreRiderTo" v-else>
						收起乘车人信息<image class="showmore-icon" src="../static/showmore-un-icon.png" mode="aspectFill"></image>
					</view>
				</view>
			</view>
			<!-- 返程班次和乘车人信息E -->
		</view>

		<!-- 单程乘车人信息S -->
		<view class="content-wrap tp-w690" v-if="!toAndFor">
			<view class="rider_info-wrap">
				<view class="common_tit-wrap">
					<view class="l-wrap">乘车人信息</view>
					<view class="r-wrap"></view>
				</view>
				<!-- 当前选择乘车人列表S -->
				<view class="rider_list" :style="{height: !hideBtn?(showMoreRider?`${188*riderList.length}rpx`:'188rpx'):(showMoreRider?`${260*riderList.length}rpx`:'260rpx')}">
					<view class="rider_item" v-for="(it_r,in_r) in riderList" :key="in_r">
						<view class="info-wrap">
							<view class="l-wrap">
								<text class="name ellispsis1">{{it_r.passageName}}</text>
								<text class="type">{{it_r.passageType}}</text>
								<text class="ID">{{it_r.passageNumber}}</text>
							</view>
							<view class="price"> <text style="font-size: 24rpx;font-weight: normal;">￥</text>{{it_r.price}}</view>
						</view>
						<view class="site-wrap">
							<text v-if="it_r.seat" class="site">{{it_r.carNumber}} 座位：{{it_r.seat}}</text>
							<text v-else></text>
							<view class="code-img" v-if="(status == 1 || status == 2) && (it_r.ticketState == 0 || it_r.ticketState == 3)"
							 @click="handlPreviewCode(wwwImgUrl + it_r.qrCode)">
								<image :src="wwwImgUrl + it_r.qrCode" mode=""></image>
							</view>
							<!-- <view class="code-img" v-else>
								<image :src="it_r.qrCode" mode=""></image>
							</view> -->
						</view>
						<view class="btns-wrap" v-if="hideBtn">
							<view v-if="it_r.goTransferId != -1" class="txt" @click="handleGoPickupDetail(it_r.goTransferId)">接站服务</view>
							<view v-if="it_r.backTransferId !=-1" class="txt" @click="handleGoPickupDetail(it_r.backTransferId)">送站服务</view>
							<view v-else class="txt"></view>
							<view class="btns">
								<view v-if="status == 1 && (it_r.ticketState == 0 || it_r.ticketState == 4) && it_r.isGaiQian== 1" class="btn back tp-ml30"
								 @click="handleShowCancle(it_r)">退票</view>
								<view v-if="it_r.isGaiQian == 1 && it_r.ticketState == 0 && status == 1" class="btn edit  tp-ml30" @click="handleShowTip(it_r.ticketId)">改签</view>
								<!-- 	</view>
							<view class="btns"> -->
								<view v-if="it_r.ticketState== 2" class="btn back_reason tp-ml30" @click="handleShowBackReason(it_r.reason)">退款原因</view>
								<view v-if="it_r.isGaiQian == 0" class="btn disabled tp-ml30">已改签</view>
								<view v-if="it_r.ticketState==1" class="btn disabled tp-ml30">已核销</view>
								<view v-if="it_r.ticketState==3" class="btn disabled tp-ml30">已失效</view>
								<!-- </view>
							<view class="btns" > -->
								<view v-if="it_r.ticketState==0" class="btn disabled tp-ml30">未核销</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 当前选择乘车人列表E -->
				<view v-if="riderList.length > 1">
					<view class="more_rider" @click="handleSwithMoreRider" v-if="!showMoreRider">
						查看乘车人信息<image class="showmore-icon" src="../static/showmore-icon.png" mode="aspectFill"></image>
					</view>
					<view class="more_rider" @click="handleSwithMoreRider" v-else>
						收起乘车人信息<image class="showmore-icon" src="../static/showmore-un-icon.png" mode="aspectFill"></image>
					</view>
				</view>

			</view>
		</view>
		<!-- 单程乘车人信息E -->

		<!-- <view class="common-wrap tp-w690">
			<view class="input-wrap">
				<view class="type">联系手机</view>
				<view class="input">
					<input type="text" disabled :value="orderDetail.phone" />
				</view>
			</view>
		</view> -->

		<!-- 其他服务S -->
		<view class="content-wrap tp-w690" v-if="serviceList.length !== 0 && !toAndFor">
			<view class="rider_info-wrap">
				<view class="common_tit-wrap">
					<view class="l-wrap">其他服务</view>
					<view class="r-wrap"></view>
				</view>
				<view class="service_list" :style="{height: showMoreService?`${90*serviceList.length}rpx`:'90rpx'}">
					<view class="service_item" v-for="(it_i, in_i) in serviceList" :key="in_i">
						<text class="name">{{it_i.name}}</text>
						<text class="price">￥{{it_i.price}}</text>
					</view>
				</view>
				<view class="more_rider" @click="handleSwithMoreService" v-if="!showMoreService">
					查看更多<image class="showmore-icon" src="../static/showmore-icon.png" mode="aspectFill"></image>
				</view>
				<view class="more_rider" @click="handleSwithMoreService" v-else>
					收起更多<image class="showmore-icon" src="../static/showmore-un-icon.png" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<!-- 其他服务E -->

		<!-- 往返程接送服务 S -->
		<view class="choose_service-wrap tp-w690" v-if="toAndFor">
			<orderDetailBusToAndForService :serviceList="serviceList" @handleChooseService="handleChooseService"></orderDetailBusToAndForService>
		</view>
		<!-- 往返程接送服务 E -->

		<!-- 支付明细S -->
		<view class="content-wrap tp-w690" v-if="hideBtn">
			<view class="rider_info-wrap">
				<view class="common_tit-wrap">
					<view class="l-wrap">支付明细</view>
					<view class="r-wrap"></view>
				</view>
				<view class="service_list" :style="{height: showMoreOrderInfo?`${90*(orderDetail.numberVos.length + 2 + (toAndFor?(serviceList[0].length + serviceList[1].length):serviceList.length))}rpx`:'90rpx'}">
					<view class="service_item" v-for="(it_n, in_i) in orderDetail.numberVos" :key="in_i">
						<text class="name">{{it_n.typeName}}</text>
						<text class="price">￥{{it_n.price}} * {{it_n.number}}人</text>
					</view>
					<view class="service_item">
						<text class="name">优惠券</text>
						<text class="price">-￥{{orderDetail.coupon}}</text>
					</view>
					<!-- <view class="service_item">
						<text class="name">积分抵扣</text>
						<text class="price">-￥{{orderDetail.balance}}</text>
					</view> -->
					<!-- 其他服务 单程的 -->
					<view class="service_item" v-if="!toAndFor" v-for="(item, index) in serviceList" :key="index">
						<text class="name">{{item.name}}</text>
						<text class="price">￥{{item.price}}</text>
					</view>
					<!-- 其他服务 往返 去程 -->
					<view class="service_item" v-if="toAndFor" v-for="(item, index) in serviceList[0]" :key="index">
						<text class="name">去程{{item.name}}</text>
						<text class="price">￥{{item.price}} * {{toRiderList.length}} 人</text>
					</view>
					<!-- 其他服务 往返 返程 -->
					<view class="service_item" v-if="toAndFor" v-for="(item, index) in serviceList[1]" :key="index">
						<text class="name">返程{{item.name}}</text>
						<text class="price">￥{{item.price}} * {{toRiderList.length}} 人</text>
					</view>
					<view class="service_item">
						<text class="name">实付款</text>
						<text class="price">￥{{orderDetail.total}}</text>
					</view>
				</view>
				<view class="more_rider" @click="handleSwithMoreOrderInfo" v-if="!showMoreOrderInfo">
					查看更多<image class="showmore-icon" src="../static/showmore-icon.png" mode="aspectFill"></image>
				</view>
				<view class="more_rider" @click="handleSwithMoreOrderInfo" v-else>
					收起更多<image class="showmore-icon" src="../static/showmore-un-icon.png" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<!-- 支付明细E -->

		<view class="order_info-wrap tp-w690">
			<view class="order_num">订单号：{{orderDetail.orderNo}} </view>
			<view class="order_date">下单时间：{{orderDetail.createTime}}</view>
			<view class="order_paytype" v-if="hideBtn">支付方式： {{orderDetail.payType}}</view>
		</view>

		<view class="other-wrap tp-w690">
			<view class="img">
				<!-- @click="handleGoInsuranceService(1)" -->
				<image :src="www + 'imgs/travel/insurance.png'" mode=""></image>
			</view>
			<view class="img">
				<image :src="www + 'imgs/travel/outhers.png'" mode=""></image>
			</view>
			<view class="img">
				<image :src="www + 'imgs/travel/outhers.png'" mode="">
			</view>
		</view>

		<view class="btm_btn-wrap">
			<view v-if="busInfo.status == 0  || (busInfoToAndFor.go && busInfoToAndFor.go.status ==0 ) || (busInfoToAndFor.back && busInfoToAndFor.back.status ==0)" class="btn cancle"
			 @click="handleCancleOrder">取消订单</view>
			<!-- v-if="busInfo.status == 0 || busInfoToAndFor.go.status==0 || busInfoToAndFor.back.status==0" -->
			<view class="btn pay" v-if="(busInfo.status == 0 || (busInfoToAndFor.go && busInfoToAndFor.go.status ==0)  || (busInfoToAndFor.back && busInfoToAndFor.back.status==0)) && countDownStartTime"
			 @click="handlePay">支付</view>
			<!-- </view>
		<view class="btm_btn-wrap" > -->
			<view v-if="busInfo.status==2" class="btn pay" @click="handleScore(false)">打分评价</view>
			<view v-if="busInfo.status==4 || (busInfoToAndFor.go && busInfoToAndFor.go.status==4) || (busInfoToAndFor.back && busInfoToAndFor.back.status==4) " class="btn pay"
			 @click="handleGoViewScore">查看评价</view>
			<view v-if="toAndFor" class="btm_btn_toandfor">
				<view class="btn pay" v-if="busInfoToAndFor.go && busInfoToAndFor.go.status==2" @click="handleScore(false)">去程评价</view>
				<view class="btn to" v-if="busInfoToAndFor.back && busInfoToAndFor.back.status==2" @click="handleScore(true)">返程评价</view>
			</view>
		</view>

		<CommonPay ref="commonPay" :price="orderDetail.total" :orderInfo="orderInfo" @payMoney="payMoney" @wechatPaySuccess="wechatPaySuccess"></CommonPay>

		<CommonAlert ref="alert" :config="alertConfig" @confirm="handleConfirmCancleOrder"></CommonAlert>

		<CommonScoreEvaluation ref="score" @confirm="handleSubmitScore"></CommonScoreEvaluation>

		<CommonTip :hideBtn="false" ref="tip" :config="tipConfig" @confirm="handleContactCustomerService"></CommonTip>

		<CommonBackReason ref="backReason" :reason="backReason"></CommonBackReason>

		<CommonShowCode ref="previewCode" :url="curPreivewUrl" @hide="getOrderDetail"></CommonShowCode>
		
		<!-- #ifdef MP-WEIXIN -->
		<Share ref="share" :info="shareInfo" :swiperList="swiperList" :shareFrom="'orderDetail'" :shareParam="busInfo"></Share>
		<!-- #endif -->

		<!-- <CommonBackReasonSubmit ref="submitReason" @confirm="handleSubmitBackReason"></CommonBackReasonSubmit> -->
		<CommonBackReasonSubmitMoney :price="cancleOrderShouldPayMoney" ref="submitReason" @confirm="handleSubmitBackReason"></CommonBackReasonSubmitMoney>
	</view>
</template>

<script>
	import CommonBackReasonSubmit from '@/components/common/common-backReason-submit.vue'
	import CommonBackReasonSubmitMoney from '@/components/common/common-backReason-submit-money.vue'
	import orderDetailBusToAndForService from '@/components/order/orderDetail-busToAndForService'
	import utils from '../../utils/utils.js'
	import CommonPay from '@/components/common/common-pay.vue'
	import CommonAlert from '@/components/common/common-alert.vue'
	import CommonScoreEvaluation from '@/components/common/common-scoreEvaluation.vue'
	import CommonTip from '@/components/common/common-tip.vue'
	import CommonBackReason from '@/components/common/common-backReason.vue'
	import CommonShowCode from '@/components/common/common-showCode.vue'
	import Share from '@/components/common/common-share.vue'
	export default {
		components: {
			CommonAlert,
			CommonScoreEvaluation,
			CommonTip,
			CommonBackReason,
			CommonShowCode,
			orderDetailBusToAndForService,
			CommonPay,
			CommonBackReasonSubmit,
			CommonBackReasonSubmitMoney,
			Share,
		},
		data() {
			return {
				status: '',
				toAndFor: false, // 往返程班true |单程false
				orderId: 0,
				hideBtn: true, // 隐藏 退票|改签 按钮 (ture支付|false未支付)
				showMoreRider: false, // 是否查看更多乘车人信息
				showMoreRiderFrom: false, // 是否查看更多乘车人信息 （往程）
				showMoreRiderTo: false, // 是否查看更多乘车人信息 （返程）
				showMoreService: false, //  是否查看更多其他服务
				showMoreOrderInfo: false, //  是否查看更多支付明细
				orderDetail: {}, // 订单详情
				riderList: [], // 乘车人列表
				fromRiderList: [], // 去程乘车人列表
				toRiderList: [], // 返程乘车人列表
				busInfo: {}, // 班车信息
				busInfoToAndFor: {}, // 班车信息往返
				insuranceList: [], // 保险列表
				serviceList: [], // 服务列表
				fromServiceList: [],
				toServiceList: [],
				alertConfig: {
					cancleText: '取消',
					confirmText: '确定',
					content: '是否取消订单？'
				},
				tipConfig: {
					content: '退票、改签服务请直接联系客服办理',
					btnText: '联系客服',
					icon: '@/pagesUser/static/phone-icon.png',
					tit: '温馨提示'
				},
				backReason: '', // 退款原因 暂存变量
				countDownStartTime: '00:00',
				timer: null,
				curPreivewUrl: '', // 当前预览二维码地址
				curicketId: '', // 当前要退票的id
				backEva: false, // 是否为返程评价
				swiperList: [], // 分享的海报背景图
				shareInfo: {}, // 分享的海报信息

				cancleOrderShouldPayMoney: 0, // 退单扣费
			};
		},
		onLoad(opt) {
			this.orderId = opt && opt.id
			this.status = opt && opt.status
			this.hideBtn = opt && opt.hideBtn && opt.hideBtn === 'true' // 默认false
			this.toAndFor = opt && opt.toAndFor && opt.toAndFor === 'true' ? true : false
			this.getOrderDetail()
		},

		onUnload() {
			if (this.timer) {
				clearInterval(this.timer)
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getOrderDetail()
		},
		computed: {
			orderInfo() {
				let o = {
					orderNo: this.orderId,
					type: 1
				}
				return o
			},
		},
		onShareAppMessage(res) {
			// console.log(this.shareInfo.customer.inviteCode);
			// console.log(JSON.stringify(this.orderDetail.dabaOrderSimpleVo.vehicleLineVo));
			if (this.toAndFor) { // 往返
				let busInfo = {}
				busInfo.from = this.orderDetail.goDabaOrderSimpleVo.vehicleLineVo
				busInfo.to = this.orderDetail.backDabaOrderSimpleVo.vehicleLineVo
				// console.log(JSON.stringify(busInfo));
				return {
					title: '和我一起，说走就走',
					path: '/pages/order/bus.order.toAndFor?inviteCode=' + this.shareInfo.customer.inviteCode + '&busInfo=' + JSON.stringify(
						busInfo),
				}
			} else {
				return {
					title: '和我一起，说走就走',
					path: '/pages/order/bus.order?inviteCode=' + this.shareInfo.customer.inviteCode + '&busInfo=' + JSON.stringify(
						this.orderDetail.dabaOrderSimpleVo.vehicleLineVo),
				}
			}

		},
		methods: {
			wechatPaySuccess() {
				this.$refs.commonPay.close()
				uni.showToast({
					title: '支付成功'
				})
				this.getOrderDetail()
			},
			handleGoInsuranceService(type) {
				uni.navigateTo({
					url: '../insuranceService?orderId=' + this.orderId + '&type=' + type
				})
			},
			handleSubmitBackReason(reason) {
				const _this = this
				// #ifdef MP-WEIXIN
				uni.requestSubscribeMessage({
					tmplIds: ['58yzFNiV-am9kUCIMJjJV1DVDbS_M27xeXkhG6Q_ruc'],
					success(res) {
						_this.submitWxNotifyConfirm('58yzFNiV-am9kUCIMJjJV1DVDbS_M27xeXkhG6Q_ruc', res[
							'58yzFNiV-am9kUCIMJjJV1DVDbS_M27xeXkhG6Q_ruc'])
						// #endif
						_this.$http.get(_this.$api.busRefundRate, {
							ticketId: _this.curicketId,
						}).then(res => {
							_this.$http.get(_this.$api.RefundTicket, {
								ticketId: _this.curicketId,
								reason
							}).then(res => {
								if (res.code === 200) {
									uni.showToast({
										title: '退票成功',
										icon: 'none'
									})
									_this.getOrderDetail()
								}
							})
						})
						// #ifdef MP-WEIXIN
					}
				})
				// #endif
			},
			// 获取退票扣费
			getBusRefundRate(id) {
				this.$http.get(this.$api.busRefundRate, {
					ticketId: id,
				}).then(res => {
					this.cancleOrderShouldPayMoney = res.data.fee
				})
			},
			handleShowCancle(item) {
				this.curicketId = item.ticketId
				this.getBusRefundRate(item.ticketId)
				this.$refs.submitReason.show()
			},
			payMoney(pwd) {
				this.$http.post(this.$api.busOrderPayMoney, {
					orderNo: this.orderId,
					payWord: pwd
				}).then(res => {
					if (res.code === 200) { // 密码正确，支付成功
						this.$refs.commonPay.closeKeyBoard()
						uni.showToast({
							title: '支付成功'
						})
						this.hideBtn = true
						this.getOrderDetail()
					}
				})
			},
			handlePay() {
				const _this = this
				// #ifdef MP-WEIXIN
				uni.requestSubscribeMessage({
					tmplIds: ['p08IN_BfeNZu8QEIasbY-BrW-sgyEX1z-4mW3BPE7P0'],
					success(res) {
						_this.submitWxNotifyConfirm('p08IN_BfeNZu8QEIasbY-BrW-sgyEX1z-4mW3BPE7P0', res[
							'p08IN_BfeNZu8QEIasbY-BrW-sgyEX1z-4mW3BPE7P0'])
						// #endif
						_this.$refs.commonPay.show()
						// #ifdef MP-WEIXIN
					}
				})
				// #endif
			},
			handleChooseService(list, i) { // 组件内获取选择的服务内容
				if (i == 0) {
					this.fromServiceList = list
				} else if (i == 1) {
					this.toServiceList = list
				}
			},
			handleSwithMoreRider() {
				this.showMoreRider = !this.showMoreRider
			},
			handleSwithMoreRiderFrom() {
				this.showMoreRiderFrom = !this.showMoreRiderFrom
			},
			handleSwithMoreRiderTo() {
				this.showMoreRiderTo = !this.showMoreRiderTo
			},
			handleSwithMoreService() {
				this.showMoreService = !this.showMoreService
			},
			handleSwithMoreOrderInfo() {
				this.showMoreOrderInfo = !this.showMoreOrderInfo
			},
			handleCancleOrder() {
				this.$refs.alert.show()
			},
			handleScore(back) { // 打分评价
				this.backEva = back
				this.$refs.score.show()
			},
			handleGoViewScore() { // 跳转到司机评价
				uni.navigateTo({
					url: '../busTravelEvaluation?id=' + this.orderId
				});
			},
			handleSubmitScore(val) { // 提交评分
				let orderId = this.orderId
				if (this.toAndFor) { // 往返程
					orderId = this.orderDetail.goDabaOrderSimpleVo.orderNo
					if (this.backEva) { // 返程
						orderId = this.orderDetail.backDabaOrderSimpleVo.orderNo
					}
				}
				const {
					rate,
					reason
				} = val
				this.$http.post(this.$api.evaluate, {
					type: 0,
					orderNo: orderId,
					grade: rate * 20,
					context: reason
				}).then(res => {
					if (res.code === 200) {
						uni.showToast({
							title: '评价成功'
						})
						setTimeout(() => {
							this.getOrderDetail()
						}, 1500)
					}
				})
			},
			handleConfirmCancleOrder() { // 确定取消订单
				const _this = this
				uni.requestSubscribeMessage({
					tmplIds: ['58yzFNiV-am9kUCIMJjJV1DVDbS_M27xeXkhG6Q_ruc'],
					success(res) {
				_this.$http.get(_this.$api.cancelBusOrder + _this.orderId).then(res => {
					if (res.code === 200) {
						let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
						if (routes.length == 1) { // 直接来的详情
							uni.switchTab({
								url: '../../pages/tabbar/home'
							})
						} else {
							uni.navigateBack({
								delta: 1
							});
						}


					}
				})
					}
				})

			},
			// 改签
			handleShowTip(id) {
				// this.$refs.tip.show()// 温馨提示弹窗
				uni.navigateTo({
					url: '/pagesTravel/travelBusList?ticketId=' + id
				})

			},
			handleContactCustomerService() { // 联系客服
				console.log('联系客服');
			},
			handleShowBackReason(reason) { // 退款原因弹窗
				this.backReason = reason
				this.$refs.backReason.show()
			},
			handlPreviewCode(url) {
				this.curPreivewUrl = url
				this.$refs.previewCode.show()
			},
			handleGoPickupDetail(id) {
				uni.navigateTo({
					url: '../pickupDetail?id=' + id
				});
			},
			// 点击分享海报
			handleShare() {
				this.$http.get(this.$api.miniShare).then(res => {
					if (res.code === 200) {
						res.data.customer.img = this.$regeImg.test(res.data.customer.img) ? res.data.customer.img : (this.$imgUrl + res.data.customer.img)
						res.data.qrCode = this.$regeImg.test(res.data.qrCode) ? res.data.qrCode : (this.$imgUrl + res.data.qrCode)
						res.data.shareList.map(item => {
							item = this.$regeImg.test(item) ? item : (this.$imgUrl + item)
						})
						this.shareInfo = res.data
						this.swiperList = res.data.shareList
						// this.shareInfo.qrCode =
						// 	'https://hanglv.ysxapp.cn/profile/upload/2020/09/16/0d6bdfa12e58af420a39ee22c6b9223a.png'
						this.$refs.share.show()
					}
				})
			},
			getOrderDetail() {
				let api = this.$api.getBusNoPayOrderDetail //  单程未支付
				if (this.toAndFor && !this.hideBtn) { // 往返未支付
					api = this.$api.getBusNoPayOrderDetailToAndFor
				} else if (!this.toAndFor && this.hideBtn) { // 单程已支付
					api = this.$api.getBusPayOrderDetail
				} else if (this.toAndFor && this.hideBtn) { // 往返已支付
					api = this.$api.getBusPayOrderDetailToAndFor
				}

				this.$http.get(api + this.orderId).then(res => {
					uni.stopPullDownRefresh();
					if (res.code === 200) {
						this.orderDetail = res.data
						if (!this.toAndFor) { // 单程
							this.riderList = res.data.passengerDetailVos
							this.busInfo = res.data.dabaOrderSimpleVo
							this.status = Number(res.data.dabaOrderSimpleVo.status)
							this.serviceList = [...res.data.serverList, ...res.data.insuranceRelates]
							if (api === this.$api.getBusPayOrderDetail) { // 单程已支付订单
								this.riderList = res.data.ticketVos
							} else { // 未支付订单(验证订单是否超时)
								this.riderList = res.data.passengerDetailVos
								this.timer = setInterval(() => {
									this.countDownStartTime = utils.getCountDownTime(res.data.createTime)
								}, 1000)
							}
						} else { // 往返
							this.fromRiderList = res.data.goTicketVos
							this.toRiderList = res.data.backTicketVos
							this.busInfoToAndFor.go = res.data.goDabaOrderSimpleVo
							this.busInfoToAndFor.back = res.data.backDabaOrderSimpleVo
							res.data.goServerList.map(item => {
								item.type = 'server'
							})
							res.data.backServerList.map(item => {
								item.type = 'server'
							})

							this.serviceList = [
								[...res.data.goInsuranceRelates, ...res.data.goServerList],
								[...res.data.backInsuranceRelates, ...res.data.backServerList]
							]

							if (api === this.$api.getBusPayOrderDetailToAndFor) { // 已支付订单

							} else { // 未支付订单(验证订单是否超时)
								this.fromRiderList = res.data.goPassengerDetailVos
								this.toRiderList = res.data.backPassengerDetailVos
								this.timer = setInterval(() => {
									this.countDownStartTime = utils.getCountDownTime(res.data.createTime)
								}, 1000)
							}
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		padding-top: 130rpx;
		padding-bottom: 98rpx;
	}

	.order_status-wrap {
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		color: #fff;
		height: 130rpx;
		font-size: 30rpx;
		position: fixed;
		/* #ifdef MP-WEIXIN */
		top: 0;
		/* #endif */
		/* #ifdef H5 */
		top: 88rpx;
		/* #endif */
		left: 0;
		right: 0;
		z-index: 9;
		background-color: $blue;

		.icon {
			height: 36rpx;
			width: 36rpx;
			margin-right: 20rpx;
		}

		&.order_success {
			display: flex;
			justify-content: space-between;

			.l-wrap {
				display: flex;
			}

			.share-icon {
				height: 36rpx;
				width: 36rpx;
			}
		}
	}

	.bus_info-wrap {
		position: relative;

		.top-dack {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 130rpx;
			background-color: $blue;
			z-index: -1;
		}

		.bus_info {
			height: 250rpx;
			background: #fff;
			border-radius: 12rpx;
			padding: 40rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			overflow: hidden;

			&.bus_info_from {
				height: auto;
				padding-bottom: 0;
				position: relative;

				.info_content-wrap {

					.form,
					.bus_type-wrap,
					.to {
						height: 100rpx;
					}
				}

				.rider_list {
					margin-top: 40rpx;

					.rider_item {
						border-top: 1px solid #ebebeb;
						border-bottom: none !important;
					}
				}

				.more_rider {
					height: 83rpx;
					line-height: 83rpx;
					text-align: center;
					color: #999;
				}

				&::after,
				&::before {
					position: absolute;
				}

				&::before {
					content: '';
					z-index: 2;
					top: 24rpx;
					right: 24rpx;
					border: 60rpx solid transparent;
					border-top: 60rpx solid #fff;
					transform: rotate(45deg);
				}

				&::after {
					top: 0;
					right: 0;
					height: 82rpx;
					width: 82rpx;
					content: '往';
					text-align: right;
					padding: 12rpx;
					box-sizing: border-box;
					z-index: 1;
					color: #fff;
					background-color: $yellow;
					border: none;
				}

				&.bus_info_to {
					margin-top: 20rpx;

					&::after,
					&::before {
						position: absolute;
					}

					&::before {
						content: '';
						z-index: 2;
						top: 24rpx;
						right: 24rpx;
						border: 60rpx solid transparent;
						border-top: 60rpx solid #fff;
						transform: rotate(45deg);
					}

					&::after {
						top: 0;
						right: 0;
						height: 82rpx;
						width: 82rpx;
						content: '返';
						text-align: right;
						padding: 12rpx;
						box-sizing: border-box;
						z-index: 1;
						color: #fff;
						background-color: $blue;
						border: none;
					}
				}

				.rider_list {
					// height: 262rpx;
					overflow: hidden;
					transition: all 0.3s ease;

					.rider_item {
						display: flex;
						flex-direction: column;
						justify-content: space-evenly;
						padding: 40rpx 0;
						border-bottom: 1px solid #ebebeb;

						&:last-child {
							border-bottom: none;
						}

						.info-wrap {
							display: flex;
							align-items: center;
							justify-content: space-between;

							.l-wrap {
								display: flex;
								align-items: center;
								font-size: 28rpx;

								.name {
									font-size: 30rpx;
									padding: 0 10rpx 0 0;
									width: 120rpx;
									font-weight: bold;
								}

								.type {
									padding-right: 20rpx;
								}
							}

							.price {
								color: $red;
								font-size: 36rpx;
								font-weight: bold;
							}
						}

						.site-wrap {
							display: flex;
							align-items: center;
							justify-content: space-between;
							font-size: 26rpx;
							color: #666;
							margin-top: 26rpx;

							.code-img {
								height: 32rpx;
								width: 32rpx;
								background-color: pink;
							}
						}

						.btns-wrap {
							margin-top: 20rpx;
							font-size: 26rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;

							.txt {
								color: $blue;
							}

							.btns {
								display: flex;
								justify-content: flex-end;

								.btn {
									min-width: 100rpx;
									height: 48rpx;
									line-height: 48rpx;
									text-align: center;
									border-radius: 12rpx;

									&.back {
										border: 1px solid $blue;
										color: $blue;
									}

									&.edit {
										border: 1px solid $yellow;
										color: $yellow;
										margin-left: 20rpx;
									}

									&.disabled {
										border: 1px solid transparent;
										background-color: #eaeaea;
										color: #999999;
									}

									&.back_reason {
										border: 1px solid transparent;
										color: $yellow;
										margin-right: 20rpx;
									}
								}
							}
						}
					}
				}
			}

			.info_top-wrap {
				display: flex;
				align-items: center;
				font-size: 26rpx;
				justify-content: space-between;
			}

			.info_content-wrap {
				display: flex;
				flex: 1;
				justify-content: space-between;
				padding-top: 30rpx;

				.from,
				.to {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					line-height: 1;

					.time {
						font-size: 48rpx;
						font-weight: bold;
					}

					.address {
						font-size: 32rpx;
					}
				}

				.to {
					text-align: right;
				}

				.bus_type-wrap {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					font-size: 24rpx;
					color: #666;

					.dack {
						width: 170rpx;
						background-color: #ccc;
						height: 6rpx;
						position: relative;

						&::before {
							content: '';
							position: absolute;
							width: 35rpx;
							height: 6rpx;
							top: -11rpx;
							right: -7rpx;
							background-color: #ccc;
							transform: rotate(45deg);
						}
					}
				}
			}
		}
	}

	.content-wrap {
		margin-top: 20rpx;

		.rider_info-wrap {
			width: 690rpx;
			background: #fff;
			border-radius: 12rpx;
			padding: 30rpx 30rpx 0;
			box-sizing: border-box;

			.common_tit-wrap {
				box-sizing: border-box;

				.l-wrap {
					font-size: 28rpx;
					font-weight: 500;
				}
			}

			.rider_list {
				// height: 262rpx;
				overflow: hidden;
				transition: all 0.3s ease;

				.rider_item {
					display: flex;
					flex-direction: column;
					justify-content: space-evenly;
					padding: 40rpx 0;
					border-bottom: 1px solid #ebebeb;

					&:last-child {
						border: none;
					}

					.info-wrap {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.l-wrap {
							display: flex;
							align-items: center;
							font-size: 28rpx;

							.name {
								font-size: 30rpx;
								padding: 0 10rpx 0 0;
								width: 120rpx;
								font-weight: bold;
							}

							.type {
								padding-right: 40rpx;
							}
						}

						.price {
							color: $red;
							font-size: 36rpx;
							font-weight: bold;
						}
					}

					.site-wrap {
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 26rpx;
						color: #666;
						margin-top: 26rpx;

						.code-img {
							height: 32rpx;
							width: 32rpx;
							background-color: pink;
						}
					}

					.btns-wrap {
						margin-top: 20rpx;
						font-size: 26rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.txt {
							color: $blue;
						}

						.btns {
							display: flex;
							justify-content: flex-end;

							.btn {
								min-width: 100rpx;
								height: 48rpx;
								line-height: 48rpx;
								text-align: center;
								border-radius: 12rpx;

								&.back {
									border: 1px solid $blue;
									color: $blue;
								}

								&.edit {
									border: 1px solid $yellow;
									color: $yellow;
									margin-left: 20rpx;
								}

								&.disabled {
									border: 1px solid transparent;
									background-color: #eaeaea;
									color: #999999;
								}

								&.back_reason {
									border: 1px solid transparent;
									color: $yellow;
									margin-right: 20rpx;
								}
							}
						}
					}
				}
			}

			.service_list {
				transition: all 0.3s ease;
				overflow: hidden;

				.service_item {
					font-size: 30rpx;
					height: 90rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1px solid #ebebeb;
				}
			}

			.more_rider {
				height: 83rpx;
				line-height: 83rpx;
				text-align: center;
				color: #999;
				border-top: 1px solid #ebebeb;
			}
		}
	}

	.order_info-wrap {
		margin-top: 20rpx;
		line-height: 50rpx;
		width: 690rpx;
		background: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.common-wrap {
		border-radius: 12rpx;
		background-color: #fff;
		padding: 0 30rpx;
		box-sizing: border-box;
		margin-top: 20rpx;

		.input-wrap {
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #ebebeb;
			font-size: 30rpx;

			&:last-child {
				border: none;
			}

			.l-wrap {
				display: flex;
				align-items: center;

				.icon {
					display: inline-block;
					height: 30rpx;
					width: 30rpx;
					margin-right: 20rpx;
				}

				.terms {
					color: $blue;
				}
			}

			.ul_service {
				display: flex;

				.li_service {
					display: flex;
					align-items: center;
					font-size: 30rpx;
					margin-left: 80rpx;

					.txt {
						margin-left: 20rpx;
					}
				}
			}

			.type {
				font-size: 30rpx;
			}

			.input {
				flex: 1;
				text-align: right;
				font-size: 30rpx;
				display: flex;

				input {
					padding-right: 6rpx;
				}
			}
		}
	}

	.showmore-icon {
		margin-left: 15rpx;
	}

	.other-wrap {
		margin: 20rpx auto;
		display: flex;
		justify-content: space-between;

		.img {
			height: 140rpx;
			width: 214rpx;
			border-radius: 12rpx;
			overflow: hidden;
			background-color: pink;
		}
	}

	.btm_btn-wrap {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 98rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-size: 30rpx;
		z-index: 3;
		background-color: #fff;
		padding: 0 30rpx;
		box-shadow: 0 2px 5px 1px #ebebeb;

		.btn {
			padding: 0 30rpx;
			min-width: 60rpx;
			border-radius: 8rpx;
			height: 72rpx;
			line-height: 72rpx;
			text-align: center;

			&.cancle {
				border: 1px solid #ccc;
				color: #ccc;
			}

			&.pay {
				color: #fff;
				background-color: $blue;
				margin-left: 20rpx;
			}
		}

		.btm_btn_toandfor {
			display: flex;
			justify-content: flex-end;

			.to {
				color: #fff;
				background-color: $yellow;
				margin-left: 20rpx;
			}
		}
	}

	.preview_code-wrap {
		height: 520rpx;
		width: 520rpx;
		padding: 28rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 20rpx;
		position: relative;

		.code {
			background-color: pink;
			width: 100%;
			height: 100%;
		}

		.close-icon {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: -120rpx;
		}
	}

	.choose_service-wrap {
		border-radius: 20rpx;
		margin-top: 20rpx;
		overflow: hidden;
	}
</style>
